<template>
  <view>
    <view class="order-item" v-for="(item,index) in orderList" :key="index">

      <view class="base-info">
        <text>{{item.updateDate}}</text>
        <text>订单号:{{item.orderId}}</text>
      </view>

      <course-item v-for="(course, i) in item.courseList" :key="i" :item="course"></course-item>

      <view class="shifu">
        <text>实付：</text>
        <text v-if="item.priceDiscount">￥{{parseFloat(item.priceDiscount).toFixed(2)}}</text>
        <text v-else>￥{{parseFloat(item.pricePayable).toFixed(2) }}</text>
      </view>

      <view class="option center space-between">
        <!-- 1待支付 2成功 3关闭 -->
        <text class="red" v-if="item.status === 1">待支付</text>
        <text class="grey" v-if="item.status === 3">交易关闭</text>
        <text class="grey" v-if="item.status === 2">交易成功</text>

        <view class="">
          <button v-if="item.status === 1" type="default" size="mini" @click="orderCancel(item.orderId)">取消订单</button>
          <button v-if="item.status === 1" type="warn" size="mini" @click="orderPay(item.orderId)">立即支付</button>
          <button v-if="item.status === 3" type="default" size="mini" @click="orderDelete(item.orderId)">删除订单</button>

        </view>

      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import courseItem from '@/components/common/course-item.vue'
  import api from '@/api/order.js'
  import {
    ref,
    onMounted,
    getCurrentInstance
  } from 'vue';

  const {
    proxy
  } = getCurrentInstance()

  const orderList = ref([])
  onMounted(() => {
    localData()
  })

  const localData = async () => {
    const {
      data
    } = await api.getUserOrderList()
    orderList.value = data
  }

  const orderCancel = (orderId) => {
    uni.showModal({
      content: '确定取消订单',
      success: async (res) => {
        if (res.confirm) {
         const res = await api.cancelOrder(orderId)
         if(res.code === 20000){
           proxy.$utils.msg("取消成功")
           localData()
         }else{
           proxy.$utils.msg("取消失败")
         }
        }
      }
    })
  }

  const orderPay = async (orderId) => {
      const {data} = await api.OrderGoToPay(orderId)
      console.log(data);
      uni.requestPayment({
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: "prepay_id="+data.prepayId,
      signType: 'RSA',
      paySign: data.paySign,
      success (res) {
        proxy.$utils.msg("付款成功")
        localData()
      },
      fail (res) { }
    })
  }

  const orderDelete = (orderId) => {
      uni.showModal({
        content: '确定删除订单',
        success: async (res) => {
          if (res.confirm) {
           const res = await api.deleteOrder(orderId)
           if(res.code === 20000){
             proxy.$utils.msg("删除成功")
             localData()
           }else{
             proxy.$utils.msg("删除失败")
           }
            
          }
        }
      })
  }
</script>

<style lang="scss" scoped>
  .order-item {
    background-color: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    font-size: 25rpx;
    border-bottom: 0.5px solid #efeff4;

    .base-info {
      color: #000;

      text:first-child {
        margin-right: 20rpx;
      }
    }

    .shifu {
      text-align: right;
      line-height: 70rpx;

      text:last-child {
        font-size: 35rpx;
        color: $mxg-text-color-red;
      }
    }

    .option {
      button {
        font-size: 20rpx;
        margin-left: 10rpx;
      }

      .red {
        color: $mxg-text-color-red;
      }

      .grey {
        color: $mxg-text-color-grey;
      }
    }

  }
</style>
